<template>
	<view>
		<u-swiper :list="banner" radius="0" height="150" keyName="image"></u-swiper>
		<view class="p-30">
			<view class="bg-white border-radius-30 p-30">
				<view class="flex px-20 mb-20 start">
					<view class="point point-1"></view>
					<view class="size-32 text-med flex">
						在
						<text class="mx-8">六合之家-西2门</text>
						<text class="pr-10">出发</text>
						<u-icon name="arrow-right" size="8" color="#444"></u-icon>
					</view>
				</view>
				<view class="flex px-20 end">
					<view class="point point-2"></view>
					<view class="size-40 text-med flex">请输入目的地</view>
				</view>
				<!-- <view class="flex mt-30 pt-20">
					<view class="size-32 text-med">出发时间</view>
					<view class="size-32 ml-30 flex-1">请选择</view>
					<u-icon name="arrow-right" size="8" color="#444"></u-icon>
				</view>
				<view class="flex mt-30">
					<view class="size-32 text-med">乘车人数</view>
					<view class="size-32 ml-30 flex-1">请选择</view>
					<u-icon name="arrow-right" size="8" color="#444"></u-icon>
				</view>
				<view class="flex mt-30 pb-10">
					<view class="size-32 text-med">行程备注</view>
					<view class="size-32 ml-30 flex-1">请填写备注</view>
					<u-icon name="arrow-right" size="8" color="#444"></u-icon>
				</view> -->
			</view>
			<view class="n-btn-primary mt-30">发布行程</view>
			<view class="bg-white border-radius-30 py-30 px-10 mt-30">
				<view class="text-med ml-20">乘客指南</view>
				<view class="flex align-stretch mt-30">
					<view class="flex-1 bg-ligter bg-1" @click="open(1)">
						<view class="size-32 text-med">乘客必读</view>
						<view class="size-24 mt-8 gray-9">顺风车规则早知道</view>
					</view>
					<view class="flex-1 bg-ligter bg-1" @click="open(2)">
						<view class="size-32 text-med">用户协议</view>
						<view class="size-24 mt-8 gray-9">企业合规资质，保障出行安全</view>
					</view>
				</view>

				<u-popup closeOnClickOverlay :show="showGuild" :round="10" mode="bottom" @close="close(1)" :customStyle="poputStyle" closeable>
					<view class="content" style="padding-top: 80rpx">
						<scroll-view scroll-y="true" style="height: 800rpx;">
							<embed type="text/html" style="height: 100%; width: 100%;"
								src="https://dpubstatic.udache.com/static/dpubimg/6a779f8ed60bf68bb6a507e2141a2bda/index.html">
						</scroll-view>
					</view>
				</u-popup>


				<u-popup closeOnClickOverlay :show="showSalfe" :round="10" mode="bottom" @close="close(2)" :customStyle="poputStyle" closeable>
					<view class="content" style="padding-top: 80rpx">
						<scroll-view scroll-y="true" style="height: 800rpx;">
							<embed type="text/html" style="height: 100%; width: 100%;"
								src="https://dpubstatic.udache.com/static/dpubimg/edec5b76abdb67784a3767f8516efe4d/index.html">
						</scroll-view>
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [{
						image: 'https://website.didiglobal.com/dist/img/express-post.890904da.jpg'
					},
					{
						image: 'https://website.didiglobal.com/dist/img/express-post.890904da.jpg'
					}
				],

				showGuild: false,
				showSalfe: false,

				poputStyle: {
					'min-height': '500rpx'
				}
			};
		},

		onLoad() {
			// this.getNewscate();
		},
		methods: {
			async getNewscate() {
				let res = await this.$api.newscate();
				console.log('res', res);
			},

			close(type) {
				
				console.log("close", type)
				if (type === 1) {
					this.showGuild = false
				} else {
					this.showSalfe = false
				}
			},

			open(type) {
				if (type === 1) {
					this.showGuild = true
				} else {
					this.showSalfe = true
				}
			}
		}
	};
</script>

<style lang="scss">
	.point {
		width: 16upx;
		height: 16upx;
		border-radius: 100%;
		margin-right: 20upx;

		&-1 {
			background: #3ce097;
		}

		&-2 {
			background: #f49e8b;
		}
	}

	.start {
		border: 6upx solid #fff;
	}

	.end {
		border: 6upx solid #333;
		border-radius: 30upx;
		padding: 20upx;
	}

	.bg-1 {
		border-radius: 20upx;
		padding: 30upx;
		margin: 0 20upx;
	}
</style>